<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>人脸识别营销后台</title>
    <meta name="ctx" th:content="${#httpServletRequest.getContextPath()}"/>
    <link rel="stylesheet" th:href="@{/css/admin/base-v2.css}">
    <!-- <link rel="stylesheet" th:href="@{/css/wlfb-font/css/iconfont.css}"> -->
    <link rel="stylesheet" th:href="@{/lib/font-awesome/4.7.0/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/css/admin/app.css}">
</head>

<body>
<div class="app">
    <div class="app-header">
        <div class="logo">
            <span ><img th:src="@{/img/logo.png}" alt=""></span>
        </div>
        <div class="title">
            <span th:text="人脸识别营销后台"></span>
        </div>

        <a th:href="@{/web/logout}">
            <div class="logout">
                <i class="icon xcfont xc-logout"></i><span>退出登录</span>
            </div>
        </a>

        <!--<div class="city">
            <img th:src="@{/img/icon-city.png}" alt="">
            <select name="city">
                &lt;!&ndash;<option value="">选择城市</option>&ndash;&gt;
                <option th:each="city: ${cityList}"
                        th:value="${city.code}"
                        th:text="${city.name}"
                        th:selected="${city.code == defalutCode} ? true : false "></option>
            </select>
        </div>-->

        <div class="user">
            <img th:src="@{/img/portrait.svg}" alt=""> <span th:text="${userName}"></span>
        </div>
    </div>
    <div class="app-container">
        <div class="app-aside">
            <div class="menu-switch">
                <i class="icon fa fa-angle-double-left"> </i>
            </div>
            <div class="menu-list">
            </div>
        </div>

        <div class="mini-sub-menu">

        </div>

        <div class="app-main">
            <!-- <div class="app-page-header">
                <div class="app-breadcrumb">
                    <a>通用模块</a>
                    <a>列表</a>
                </div>
            </div> -->
            <!-- 初始页面地址 -->
            <iframe th:src="@{/web/home}" frameborder="0"></iframe>
        </div>
    </div>
</div>

<script th:src="@{/lib/jquery.min.js}"></script>
<script th:src="@{/js/admin/index.js}"></script>
<script type="text/javascript" th:inline="javascript">
    //获取context path
    var context = $("meta[name='ctx']").attr("content") || '';
    var start = new Date().getTime();
    $(function () {
        //初始化菜单
        // var menudata = null;
        var url = context + "/module/listMenuModule";
        $.ajax({
            type: "POST",
            url: url,
            success: function (obj) {
                var code = obj.code;
                if (code == 0) {
                    console.log("查询菜单耗时："+(new Date().getTime() - start));
                    parseMenu(obj.data, context);
                }
            }
        })
    })

    //解析函数
    function parseMenu(arr) {

        if (arr.length != 0) {

            function pp(arr, pid) {

                for (var i = 0; i < arr.length; i++) {

                    var menuinfo = arr[i];

                    if (menuinfo.label && menuinfo.moduleId) {

                        if (!pid) {

                            var $menuitem = $('<div class="menu-group">' +
                                '                    <a class="menu-item" href="' + (menuinfo.url ? context + menuinfo.url : '') + '"  id="' + menuinfo.moduleId + '">' +
                                '                        <i class="icon ' + menuinfo.icon + '"></i>' +
                                '                        <div class="title">' + menuinfo.label + '</div>' +
                                (menuinfo.children.length > 0 ? '<div class="arrow fa fa-angle-right"></div>' : '') +
                                '                    </a>' +
                                // '                    <ul style="" id=""></ul>' +
                                '                </div>');
                            $('.menu-list').append($menuitem)
                        } else {

                            var $menuitem = $(
                                '            <div class="menu-group">' +
                                '                <a class="menu-item" href="' + (menuinfo.url ? context + menuinfo.url : '') + '" id="' + menuinfo.moduleId + '">' +
                                '                    <div class="title">' + menuinfo.label + '</div>' +
                                (menuinfo.children.length > 0 ? '<div class="arrow fa fa-angle-right"></div>' : '') +
                                '                </a>' +
                                '            </div>'
                            );

                            if ($('#' + pid).siblings('ul').length > 0) {
                                $('#' + pid).siblings('ul').append($menuitem)
                            } else {
                                $('#' + pid).parent().append('<ul style="" id=""></ul>');
                                $('#' + pid).siblings('ul').append($menuitem)
                            }

                        }

                        pp(menuinfo.children, menuinfo.moduleId);
                    } else {
                        console.log(menuinfo.label); //这里可以写菜单的样式结构...
                    }
                }
            }

            pp(arr, null);
        }
    }

    //修改登录用户的城市
    $('[name="city"]').change(function() {
        var url = "/web/updateLoginUserCity";
        if (context) {
            url = context + url;
        }
        var cityCode = $(this).val();
        // var cityName = $(this).innerHTML();

        var cityName;
        $('[name="city"] option').each(function () {
            if($(this)[0].selected){
                cityName = $(this).html();
            }
        })

        console.log(cityName);

        if (cityCode) {
            $.ajax({
                type: "POST",
                url: url,
                data: {
                    cityCode : cityCode,
                    cityName : cityName
                },
                success: function (obj) {
                    var code = obj.code;
                    if (code == 0) {
                        $('iframe').attr('src',$('iframe').attr('src'))
                    }
                }
            })
        }
    })

</script>

</body>

</html>